<template lang="">
	<div class="motifypsw-wrap">
		<mine-header>{{ title }}</mine-header>

		<!-- 菜单选项 -->
		<form @submit.prevent="commit" class="form-list">
			<div class="form-item">
				<label for="title">标题</label>
				<input
					type="text"
					placeholder="请输入标题"
					name="title"
					id="title"
					required
				/>
			</div>
			<div class="form-item">
				<label for="address">地址</label>
				<input
					type="text"
					placeholder="请输入街道、小区等信息"
					name="address"
					id="address"
					required
				/>
			</div>
			<div class="form-item">
				<label for="deposit">押金</label>
				<input
					type="text"
					placeholder="请输入押金"
					name="deposit"
					id="deposit"
					required
				/>
			</div>
			<div class="form-item">
				<label for="rent">租金</label>
				<input
					type="text"
					placeholder="请输入租金"
					name="rent"
					id="rent"
					required
				/>
			</div>
			<div class="form-item">
				<label for="area">地方区域</label>
				<input
					type="text"
					placeholder="请选择地方区域"
					name="area"
					id="area"
					required
				/>
			</div>
			<div class="form-item">
				<label for="mold">租房类型</label>
				<input
					type="text"
					placeholder="请输入日租/月租"
					name="mold"
					id="mold"
					required
				/>
			</div>
			<div class="form-item">
				<label for="explain">补充说明</label>
				<input
					type="text"
					placeholder="请填写您对民宿的描述和价格"
					name="explain"
					id="explain"
					required
				/>
			</div>
			<div class="form-item">
				<label for="pic">上传图片</label>
				<input type="file" name="pic" id="pic" required />
			</div>
		</form>
		<div class="commit">
			<button @click="commitAction">提交</button>
		</div>
	</div>
</template>
<script>
import MineHeader from '@/views/Mine/com/mine-header.vue';
export default {
	name: 'hashandload',
	components: {
		[MineHeader.name]: MineHeader,
	},
	data() {
		return {
			objData: {},
			title: '发布房源',
		};
	},
	methods: {
		commitAction() {
			////点击提交跳回租房信息(发布房源信息页面)
			this.$router.push({
				name: 'myhomeinfo',
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.motifypsw-wrap {
	width: 100%;
	height: 100%;
	background-color: #f4f6f9;
	position: absolute;
	top: 0;
	z-index: 9;

	.form-list {
		width: 100%;
		margin-top: 15px;
		.form-item {
			height: 45px;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-top: 1px solid #b3b4c7;
			background-color: #fff;
			label {
				font-size: 14px;
				color: #32354a;
				padding: 10px;
				font-weight: 400;
				width: 80px;
			}
			input {
				flex: 1;
				font-size: 14px;
				color: #32354a;
				font-weight: 400;
				padding-right: 20px;
				height: 30px;
				border: 0;
				line-height: 100%;
				outline: medium;
			}
		}
		:last-child {
			border-bottom: 1px solid #b3b4c7;
		}
	}

	.commit {
		display: flex;
		justify-content: center;
		padding: 15px;
		button {
			width: 274px;
			height: 44px;
			text-align: center;
			background-color: #4a73ff;
			color: #fff;
			border: 1px #4a73ff solid;
			border-radius: 5px;
		}
	}
}
</style>
